<template>
  <div
    class="pageBimVisual-container"
    :class="isFull && 'full-screen'"
    ref="pageBimVisual-container"
  >
    <!-- 自定义顶部工具栏 -->
    <div class="bim-top-toolbar" v-if="bimOnLoaded">
      <div class="item-container">
        <a-tooltip
          placement="bottom"
          v-for="(item, index) in getTools(1)"
          :key="index"
        >
          <template slot="title">
            <span>{{ item.title }}</span>
          </template>
          <div
            class="toolbar-btn"
            :class="topToolBarActiveIndex == item.type && 'active'"
            @click="handleChooseToolBar(item)"
          >
            <icon-font
              :type="item.icon"
              :style="{ color: item.color, fontSize: '20px' }"
            ></icon-font>
          </div>
        </a-tooltip>
      </div>
      <div class="item-container">
        <a-tooltip
          placement="bottom"
          v-for="(item, index) in getTools(2)"
          :key="index"
        >
          <template slot="title">
            <span>{{ item.title }}</span>
          </template>
          <div
            class="toolbar-btn"
            :class="topToolBarActiveIndex == item.type && 'active'"
            @click="handleChooseToolBar(item)"
          >
            <icon-font
              :type="item.icon"
              :style="{ color: item.color, fontSize: '20px' }"
            ></icon-font>
          </div>
        </a-tooltip>
      </div>
      <div class="item-container">
        <a-tooltip
          placement="bottom"
          v-for="(item, index) in getTools(3)"
          :key="index"
        >
          <template slot="title">
            <span>{{
              topToolBarActiveIndex == 11
                ? isFull
                  ? "退出全屏"
                  : "全屏"
                : item.title
            }}</span>
          </template>
          <div
            class="toolbar-btn"
            :class="
              topToolBarActiveIndex == item.type &&
                topToolBarActiveIndex != 11 &&
                'active'
            "
            @click="handleChooseToolBar(item)"
          >
            <icon-font
              :type="item.icon"
              :style="{ color: item.color, fontSize: '20px' }"
            ></icon-font>
          </div>
        </a-tooltip>
      </div>
    </div>
    <!-- fabric-toolbar工具栏 -->
    <div class="fabric-toolbar-container" v-if="annotationsDrawer.fabric">
      <div class="toolContainer">
        <div
          class="itemView"
          v-for="(item, index) in fabricBarSource"
          :key="item.type"
          @click="handelFabricToolbar(item, index)"
          :class="fabricBarActiveIndex == item.type && 'active'"
        >
          <icon-font
            :type="item.icon"
            :style="{ fontSize: '20px' }"
          ></icon-font>
        </div>
        <div class="divider"></div>
        <div class="itemView" @click="fabricRevocation()">
          <icon-font
            type="icon-fanhui1"
            :style="{ fontSize: '20px' }"
          ></icon-font>
        </div>
        <div class="graphic-button">
          <div class="space-item" @click="handelFabricClose()">取消</div>
          <div class="space-item" @click="handelFabricOk()">完成</div>
        </div>
      </div>
      <div
        class="stylePickerContainer"
        :style="{ marginLeft: annotationsDrawer.pickerLeft + 'px' }"
        v-if="fabricBarActiveIndex"
      >
        <div class="arrow"></div>
        <div class="stylePickerWrapper">
          <a-slider
            v-model="annotationsDrawer.sliderValue"
            :min="1"
            :max="annotationsDrawer.maxValue"
          />
          <div class="text">{{ annotationsDrawer.sliderValue }}</div>
          <div class="divider"></div>
          <div class="color-list">
            <div
              class="colorItem"
              v-for="(item, index) in colorBarSource"
              :key="index"
              :style="{ backgroundColor: item }"
              :class="[annotationsDrawer.colorActive == index && 'active']"
              @click="handelColor(item, index)"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <a-spin :spinning="loading">
      <div
        ref="panoramicDisplayCanvasContainer"
        id="panoramicDisplayCanvasContainer"
        class="panoramicDisplayCanvasContainer"
      >
        <!-- fabric画布容器 -->
        <div class="fabric-drawing-board" v-if="fabricDrawerType">
          <canvas id="fabricCanvasContainer"></canvas>
        </div>

        <!-- bim容器 -->
        <div class="BlackHole-container" ref="blackHoleContainer"></div>
      </div>
    </a-spin>
    <!-- 空 -->
    <div class="empty-tip" v-if="dataSetListSource.length == 0">
      <a-empty :description="false" />
    </div>
    <!-- 模型列表 -->
    <modelListDrawer
      :key="modelListDrawer.key"
      :visible.sync="modelListDrawer.visible"
      @close="handleModelListDrawerClose()"
    ></modelListDrawer>
    <!-- 视口列表 -->
    <viewportDrawer
      :visible.sync="viewportDrawer.visible"
      @close="handleViewportDrawerClose()"
    ></viewportDrawer>
    <!-- 标记列表 -->
    <markersDrawer
      ref="markersDrawer"
      :visible.sync="markersDrawer.visible"
      :probeRet.sync="currentProbeRet"
      @close="handleMarkersDrawerClose()"
    ></markersDrawer>
    <!-- 标记信息label -->
    <div
      class="graphic-list-container"
      v-if="markersPop.visible"
      :style="{
        bottom: markersPop.bottom + 'px',
        left: markersPop.left + 'px',
      }"
    >
      <markersPop :elemId="markersPop.elemId"></markersPop>
      <a-icon
        class="pop-close"
        type="close"
        @click="markersPop.visible = false"
      />
      <div class="pop-arrow"></div>
    </div>
    <!-- 漫游列表 -->
    <roamDrawer
      :visible.sync="roamDrawer.visible"
      @close="handleRoamDrawerClose()"
    ></roamDrawer>
    <!-- 属性信息 -->
    <attributeDrawer
      ref="attributeRef"
      :visible.sync="attributeDrawer.visible"
      :probeRet.sync="currentProbeRet"
      @close="handleAttributeDrawerClose()"
    ></attributeDrawer>
    <!-- 批注列表 -->
    <annotationsDrawer
      ref="annotationsDrawerRef"
      :visible.sync="annotationsDrawer.visible"
      @close="handleAnnotationsDrawerClose()"
      @open="handleFabricOpen()"
    >
    </annotationsDrawer>
    <!-- 新增批注 -->
    <addAnnotationsModal
      :visible.sync="addAnnotationsModal.visible"
      :operateType.sync="addAnnotationsModal.operateType"
      :parameter="addAnnotationsModal.soucre"
      :snapshot="addAnnotationsModal.snapshot"
      :reOpen.sync="addAnnotationsModal.reOpen"
      @refresh="refreshAnnotationData($event)"
    ></addAnnotationsModal>
    <!-- 版本对比 -->
    <versionModal
      :visible.sync="versionModal.visible"
      @close="handleVersionModalModalClose()"
    ></versionModal>
    <!-- 图模联动 -->
    <artworkDrawer
      :visible.sync="artworkDrawer.visible"
      @close="handleArtworkDrawerClose()"
      ref="artworkDrawer"
    ></artworkDrawer>
    <template v-if="this.topToolBarActiveIndex == 8">
      <div
        class="hide-icon"
        @click="handleHide(false)"
        v-if="artworkDrawer.double"
      >
        <a-icon type="double-left" />
      </div>
      <div class="show-icon" v-else @click="handleHide(true)">
        <a-icon type="double-right" />
      </div>
    </template>
    <!-- 分享弹窗 -->
    <shareModal
      :visible.sync="shareScene.visible"
      @close="handleArtworkDrawerClose()"
    ></shareModal>
    <!-- 构件查询弹窗 -->
    <componentSearchModal
      :visible.sync="componentSearch.visible"
      @close="handleArtworkDrawerClose()"
    ></componentSearchModal>
  </div>
</template>
<script>
import fabricMixin from "./fabricMixin";
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import { canvasHolder } from "@/blackHoleTools/CanvasHolder";
import { releaseEngine, initialSDKModule } from "@/blackHoleTools/Engine";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
//模型列表
import modelListDrawer from "./modelListDrawer";
//视口列表
import viewportDrawer from "./viewportDrawer";
//标记列表
import markersDrawer from "./markersDrawer";
//标记label
import markersPop from "./markersPop";
// 漫游列表
import roamDrawer from "./roamDrawer";
//属性信息
import attributeDrawer from "./attributeDrawer";
//批注列表
import annotationsDrawer from "./annotationsDrawer";
//进度条
import playerProgress from "./playerProgress";
// 批注列表
import addAnnotationsModal from "./addAnnotationsModal";
//版本对比
import versionModal from "./versionModal";
//图模联动
import artworkDrawer from "./artworkDrawer";
//分享弹窗
import shareModal from "./shareModal";
//构件查询弹窗
import componentSearchModal from "./componentSearchModal";
export default {
  inject: ["currentProject"],
  provide() {
    return {
      sceneSource: () => this.sceneData,
      fabricCanvas: () => this.canvas,
    };
  },
  mixins: [fabricMixin],
  data() {
    return {
      //分享场景
      shareScene: {
        visible: false,
      },
      //构件查询
      componentSearch: {
        visible: false,
      },
      //新增批注
      addAnnotationsModal: {
        visible: false,
        operateType: 1,
        snapshot: "",
        soucre: {},
        reOpen: false,
      },
      loading: false,
      //全屏标识
      isFull: false,
      //顶部工具栏激活标识
      topToolBarActiveIndex: null,
      //顶部工具栏数据
      topToolBarSource: [
        {
          area: 1,
          type: 1,
          title: "场景图层",
          icon: "icon-shuxingkongjian",
          color: "#1677FF",
        },
        {
          area: 1,
          type: 2,
          title: "属性信息",
          icon: "icon-tishi",
          color: "#09C6A2",
        },
        {
          area: 1,
          type: 3,
          title: "版本对比",
          icon: "icon-duibi",
          color: "#EA9356",
        },
        //
        {
          area: 2,
          type: 4,
          title: "标记",
          icon: "icon-a-333",
          color: "#C652F0",
        },
        {
          area: 2,
          type: 5,
          title: "批注",
          icon: "icon-a-444",
          color: "#49CADA",
        },
        {
          area: 2,
          type: 6,
          title: "视口",
          icon: "icon-a-555",
          color: "#EA9356",
        },
        {
          area: 2,
          type: 7,
          title: "漫游",
          icon: "icon-a-888",
          color: "#DE63D0",
        },
        {
          area: 2,
          type: 8,
          title: "图模联动",
          icon: "icon-a-666",
          color: "#4D8EEA",
        },
        //
        {
          area: 3,
          type: 9,
          title: "分享",
          icon: "icon-a-999",
          color: "#47CFE0",
        },
        {
          area: 3,
          type: 10,
          title: "构件查询",
          icon: "icon-Vector",
          color: "#EA5D6D",
        },
        {
          area: 3,
          type: 11,
          title: "全屏",
          icon: "icon-a-777",
          color: "#09C6A2",
        },
      ],
      //fabric数据
      fabricBarSource: [
        {
          type: 1,
          drawerType: "all",
          icon: "icon-huabi",
        },
        {
          type: 2,
          drawerType: "cloud",
          icon: "icon-yun",
        },
        {
          type: 3,
          drawerType: "rect",
          icon: "icon-juxing",
        },
        {
          type: 4,
          drawerType: "ellipse",
          icon: "icon-big-circle",
        },
        {
          type: 5,
          drawerType: "arrow",
          icon: "icon-jiantou",
        },
        {
          type: 6,
          drawerType: "text",
          icon: "icon-font-size-2",
        },
      ],
      //fabric数据选中
      fabricBarActiveIndex: null,
      fabricDrawerType: "",
      //颜色集合
      colorBarSource: [
        "#EE4844",
        "#FDE75B",
        "#27AF24",
        "#2DABEF",
        "#000000",
        "#9B9B99",
        "#FFFFFF",
      ],
      //模型列表
      modelListDrawer: {
        visible: false,
        key: 0,
      },
      //视口列表
      viewportDrawer: {
        visible: false,
      },
      //标记列表
      markersDrawer: {
        visible: false,
      },
      dataSetListSource: [],
      bimOnLoaded: false,
      currentProbeRet: {},
      //漫游列表
      roamDrawer: {
        visible: false,
      },
      //锚点信息弹窗
      markersPop: {
        left: 0,
        bottom: 0,
        visible: false,
        elemId: "",
      },
      //属性信息
      attributeDrawer: {
        visible: false,
      },
      //批注列表
      annotationsDrawer: {
        //抽屉
        visible: false,
        //操作栏
        fabric: false,
        //左偏移
        pickerLeft: 0,
        //滑动默认值
        sliderValue: 5,
        //滑动最大值
        maxValue: 20,
        //颜色选中
        colorActive: 0,
        //默认颜色
        color: "#EE4844",
      },
      //默认视口数据
      defaultViewPortData: {},
      //场景数据
      sceneData: {},
      //版本对比
      versionModal: {
        visible: false,
      },
      //图模联动
      artworkDrawer: {
        visible: false,
        double: false,
      },
    };
  },
  components: {
    modelListDrawer,
    viewportDrawer,
    IconFont,
    playerProgress,
    markersDrawer,
    markersPop,
    roamDrawer,
    attributeDrawer,
    annotationsDrawer,
    addAnnotationsModal,
    versionModal,
    artworkDrawer,
    shareModal,
    componentSearchModal,
  },
  computed: {
    ...mapGetters(["blackHoleAssetsPreFetch", "blackHoleRESystemCreated"]),
  },
  watch: {
    //系统引擎创建完成 && 公共资源加载完成
    // RESystemRenderReady: {
    //   handler(val) {
    //     if (val == true) {
    //       this.getData();
    //     }
    //   },
    //   immediate: true,
    // },

    blackHoleAssetsPreFetch: {
      handler(val) {
        this.$nextTick((_) => {
          if (val) {
            initialSDKModule();
          }
        });
      },
      immediate: true,
    },

    blackHoleRESystemCreated: {
      handler(val) {
        if (val) {
          this.$nextTick((_) => {
            this.getDataSetSource().then((res) => {
              if (res.length > 0) {
                canvasHolder.moveCanvasToTarget(
                  this.$refs.blackHoleContainer,
                  BlackHole3D
                );
                this.addEventListener();
                this.onEngineCreated(res);
                this.getDefaultViewPort();
              }
            });
          });
        }
      },
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
      if (this.canvas) {
        this?.setCanvasSize();
      }
    });
  },
  methods: {
    //图模联动显示隐藏
    handleHide(flag) {
      this.$refs["artworkDrawer"].hanleVisible(flag);
      this.artworkDrawer.double = !this.artworkDrawer.double;
    },

    //刷新批注列表数据
    refreshAnnotationData(ev) {
      let { event } = ev;
      switch (event) {
        //新增
        case "add":
          this.$refs.annotationsDrawerRef.getData();
          this.annotationsDrawer.fabric = false;
          break;

        //编辑
        case "edit":
          this.$refs.annotationsDrawerRef.getData();
          this.annotationsDrawer.fabric = false;
          break;

        default:
          break;
      }
    },

    //
    // getData() {
    //   this.loading = true;
    //   Promise.all([this.getDataSetSource()]).finally((_) => {
    //     this.loading = false;
    //   });
    // },

    //查询模型列表
    getDataSetSource() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        this.bimOnLoaded = false;
        let { foreignUuid } = this.currentProject();
        if (!foreignUuid) {
          this.loading = false;
          resolve([]);
          return;
        }
        axios
          .post(
            "/probusiness/blackHole3D/project/dataSet/viewDataSetModel",
            { projId: foreignUuid },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data, statusCode } = res;
            let { modelData } = data ?? {};
            this.sceneData = data ?? {};
            if (modelData && modelData.length > 0 && statusCode == 200) {
              this.dataSetListSource = modelData ?? [];
              //   this.$nextTick((_) => {
              //     this.addEventListener();
              //     this.onEngineCreated(modelData ?? []);
              //   });
              //   this.getDefaultViewPort();
            } else {
              this.dataSetListSource = [];
            }
            resolve(this.dataSetListSource);
          })
          .catch((_) => {
            this.sceneData = {};
            this.dataSetListSource = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //查询默认视口
    getDefaultViewPort() {
      let { orgCode } = this.currentProject();
      console.log(this.sceneData);
      let { sceneId } = this.sceneData;
      return new Promise((resolve, reject) => {
        axios
          .post(
            "/probusiness/bimViewport/getDefaultData",
            { proCode: orgCode, sceneId },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.defaultViewPortData = data ?? {};
            resolve(this.defaultViewPortData);
          })
          .catch((_) => {
            this.defaultViewPortData = {};
            reject();
          });
      });
    },

    //顶部工具栏点击
    handleChooseToolBar(item = {}) {
      this.closePop();
      let { type } = item;
      type != 11 && this.clearModalCom();
      if (type == this.topToolBarActiveIndex && type != 11) {
        this.topToolBarActiveIndex = null;
      } else {
        this.topToolBarActiveIndex = type;
      }
      //
      switch (this.topToolBarActiveIndex) {
        //模型列表
        case 1:
          this.modelListDrawer.key = Date.now();
          this.modelListDrawer.visible = true;
          break;

        //属性信息
        case 2:
          this.attributeDrawer.visible = true;
          break;

        //版本对比
        case 3:
          this.versionModal.visible = true;
          break;

        //标记列表
        case 4:
          this.markersDrawer.visible = true;
          break;

        //批注列表
        case 5:
          this.annotationsDrawer.visible = true;
          break;

        //视口列表
        case 6:
          this.viewportDrawer.visible = true;
          break;

        //漫游列表
        case 7:
          this.roamDrawer.visible = true;
          break;

        //图模联动
        case 8:
          this.artworkDrawer.visible = true;
          this.artworkDrawer.double = true;
          break;

        //分享
        case 9:
          this.shareScene.visible = true;
          break;
        //构件查询
        case 10:
          this.componentSearch.visible = true;
          break;
        //全屏
        case 11:
          this[this.isFull ? "exitFullscreen" : "fullScreen"]();
          break;

        default:
          break;
      }
    },

    //清空弹窗组件
    clearModalCom() {
      this.modelListDrawer.visible = false;
      this.viewportDrawer.visible = false;
      this.markersDrawer.visible = false;
      this.roamDrawer.visible = false;
      this.attributeDrawer.visible = false;
      this.annotationsDrawer.visible = false;
      this.handelFabricClose();
      this.artworkDrawer.visible = false;
      this.artworkDrawer.double = false;
    },

    addEventListener() {
      //场景模型加载完成回调
      document.addEventListener("REDataSetLoadFinish", (_) => {
        console.log("xxxxxx");
        //设置系统UI
        this.setSystemUI();
        //
        this.setDefaultViewport();
        //
        if (!this.artworkDrawer.visible) {
          BlackHole3D.BIM.resetElemAttr("", []);
        }
        this.bimOnLoaded = true;
      });

      window.addEventListener("resize", this.onResize);

      //鼠标探测矢量元素事件
      document.addEventListener(
        "RESystemSelShpElement",
        this.RESystemSelShpElement
      );
      //鼠标探测模型事件
      document.addEventListener("RESystemSelElement", (e) => {
        this.constructClick(e);
      });
    },

    //设置初始化视口
    setDefaultViewport() {
      let { camDir, camPos, camRotate } = this.defaultViewPortData;
      try {
        var camLoc = new BlackHole3D.RECamLoc();
        camLoc.camPos = JSON.parse(camPos);
        camLoc.camRotate = JSON.parse(camRotate);
        camLoc.camDir = JSON.parse(camDir);
        var locDelay = 0;
        var locTime = 0;
        BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
        console.log("111===", this.defaultViewPortData);
      } catch (error) {}
    },

    //系统引擎创建完成回调【加载模型资源】
    onEngineCreated(dataSource = []) {
      let dom = this.$refs.blackHoleContainer;
      let BlackHole3D = window.BlackHole3D;
      canvasHolder.moveCanvasToTarget(this.$refs.blackHoleContainer);
      BlackHole3D.m_re_em_window_width = dom.clientWidth;
      BlackHole3D.m_re_em_window_height = dom.clientHeight;
      BlackHole3D.Coordinate.setEngineWorldCRS("EPSG:3857");
      let dataSetSources = [];
      dataSource.forEach((item) => {
        let { dataSetId, resourcesAddress, dataSetCrs, offsetData } = item;
        let { rotate, scale, translation } = offsetData ?? {
          rotate: "0 0 0 1",
          scale: "1 1 1",
          translation: "0 0 0",
        };
        dataSetSources.push({
          dataSetId,
          resourcesAddress,
          useTransInfo: true,
          transInfo: [
            scale.split(" ").map((v) => Number(v)),
            rotate.split(" ").map((v) => Number(v)),
            translation.split(" ").map((v) => Number(v)),
          ],
          dataSetCRS: dataSetCrs,
        });
      });
      //开始加载一个或多个模型资源
      BlackHole3D.Model.loadDataSet(dataSetSources);
    },

    //设置系统UI
    setSystemUI() {
      BlackHole3D.Graphics.setGeoCoordVisible(false);
      BlackHole3D.Graphics.setSysUIPanelVisible(true);
      BlackHole3D.Graphics.setSysPanelUIDockArea(3);
      BlackHole3D.Camera.resetCamLocate();
      BlackHole3D.Camera.resetCamBound();
    },

    //监听构件点击时间
    constructClick(e) {
      var ProbeRet = BlackHole3D.Probe.getCurProbeRet();
      this.currentProbeRet = ProbeRet;
      //属性信息
      if (this.attributeDrawer.visible) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.attributeRef.getData();
          }, 300);
        });
      }
    },

    //监听窗口尺寸变化
    onResize() {
      let box = this.$refs["blackHoleContainer"];
      if (box) {
        window.BlackHole3D.m_re_em_window_width = window.innerWidth;
        window.BlackHole3D.m_re_em_window_height = window.innerHeight;
      }
    },

    getTools(area = 1) {
      return this.topToolBarSource.filter((v) => v.area == area) ?? [];
    },

    //模型列表关闭事件
    handleModelListDrawerClose() {
      this.topToolBarActiveIndex = null;
    },

    //视口列表关闭事件
    handleViewportDrawerClose() {
      this.topToolBarActiveIndex = null;
    },

    //标记列表关闭事件
    handleMarkersDrawerClose() {
      this.topToolBarActiveIndex = null;
    },

    //漫游列表关闭事件
    handleRoamDrawerClose() {
      this.topToolBarActiveIndex = null;
    },

    //属性信息关闭事件
    handleAttributeDrawerClose() {
      this.topToolBarActiveIndex = null;
    },

    //批注列表关闭事件
    handleAnnotationsDrawerClose() {
      this.topToolBarActiveIndex = null;
      this.handelFabricClose();
    },

    //版本对比弹窗关闭
    handleVersionModalModalClose() {
      this.topToolBarActiveIndex = null;
    },
    //图模联动列表关闭事件
    handleArtworkDrawerClose() {
      this.topToolBarActiveIndex = null;
    },

    //打开批注toolbar
    handleFabricOpen() {
      this.annotationsDrawer.fabric = true;
    },
    //关闭批注toolbar
    handelFabricClose() {
      this.disposeFabric();
      this.annotationsDrawer.fabric = false;
      this.fabricBarActiveIndex = null;
      this.annotationsDrawer.pickerLeft = 0;
      this.annotationsDrawer.sliderValue = 2;
      this.annotationsDrawer.maxValue = 20;
      this.annotationsDrawer.colorActive = 0;
      this.annotationsDrawer.color = "#EE4844";
    },
    //批注toolbar确定
    handelFabricOk() {
      let allGraphArr = this.getAllGraph() ?? [];
      if (allGraphArr.length == 0) {
        this.$message.warning("暂无批注信息！");
        return;
      }
      let { reOpen } = this.addAnnotationsModal;
      if (!reOpen) {
        this.addAnnotationsModal.operateType = 1;
        this.addAnnotationsModal.soucre = {};
      }
      this.addAnnotationsModal.visible = true;
      setTimeout((_) => {
        this.disposeFabric();
      }, 200);
    },

    //批注toolbar选择事件
    handelFabricToolbar(item) {
      let { type, drawerType } = item;
      this.fabricBarActiveIndex = type;
      this.annotationsDrawer.sliderValue = 2;
      this.annotationsDrawer.maxValue = 20;
      this.$nextTick((_) => {
        setTimeout(() => {
          !this.canvas && this.annotationsDrawer.fabric && this.initFabric();
          if (this.canvas) {
            this.canvas.defaultCursor = "default";
            this.canvas.isDrawingMode = false;
            this.canvas.freeDrawingBrush.color = "transparent";
            this.canvas.freeDrawingBrush.width = 0;
            if (drawerType == "all") {
              this.canvas.isDrawingMode = true;
              this.canvas.freeDrawingBrush.color =
                this.colorBarSource?.[
                  this.annotationsDrawer?.colorActive ?? 0
                ] ?? "red";
              this.canvas.freeDrawingBrush.width = this.annotationsDrawer.sliderValue;
            } else if (drawerType == "text") {
              this.canvas.defaultCursor = "text";
            }
          }
        }, 200);
      });
      this.fabricDrawerType = drawerType;
      //

      //
      switch (type) {
        case 1:
          this.annotationsDrawer.pickerLeft = 0;
          break;
        case 2:
          this.annotationsDrawer.pickerLeft = 56;
          break;
        case 3:
          this.annotationsDrawer.pickerLeft = 112;
          break;
        case 4:
          this.annotationsDrawer.pickerLeft = 168;
          break;
        case 5:
          this.annotationsDrawer.pickerLeft = 224;
          break;
        case 6:
          this.annotationsDrawer.pickerLeft = 280;
          this.annotationsDrawer.sliderValue = 16;
          this.annotationsDrawer.maxValue = 60;
          break;
        default:
          break;
      }
    },

    //颜色点击事件
    handelColor(item, index) {
      this.annotationsDrawer.color = item;
      this.annotationsDrawer.colorActive = index;
    },

    //关闭锚点信息弹窗
    closePop() {
      this.markersPop.visible = false;
    },

    //鼠标探测矢量元素事件 【锚点】
    RESystemSelShpElement() {
      var ProbeRet = BlackHole3D.Probe.getCurShpProbeRet();
      let { dataSetId, elemId, elemPos } = ProbeRet;
      this.markersPop.visible = false;
      //监听相机运动
      document.addEventListener("RECameraMove", (_) => {
        var [x, y] = BlackHole3D.Coordinate.getWorldPosToScreenPos(
          elemPos ?? [],
          100
        );
        this.markersPop.left = x + 92;
        this.markersPop.bottom = y + 50;
      });
      if (elemId) {
        var [x, y] = BlackHole3D.Coordinate.getWorldPosToScreenPos(
          elemPos ?? [],
          100
        );
        this.markersPop.visible = true;
        this.markersPop.left = x + 92;
        this.markersPop.bottom = y + 50;
        this.markersPop.elemId = elemId;
      }
    },

    //全屏
    fullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },

    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
  },
  beforeDestroy() {
    this.disposeFabric();
    releaseEngine();
  },
};
</script>
<style lang="less" scoped>
.pageBimVisual-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;

  .fabric-drawing-board {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
  }
  .empty-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .bim-top-toolbar {
    width: 666px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
    justify-content: space-between;
    z-index: 99;
    .item-container {
      display: flex;
      .toolbar-btn {
        width: 40px;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover,
        &.active {
          background: rgba(22, 119, 255, 0.3);
        }
        &:not(:first-child) {
          margin-left: 16px;
        }
      }
      &:nth-child(2) {
        position: relative;
        &:before,
        &::after {
          position: absolute;
          content: "";
          width: 1px;
          height: 18px;
          background: #8c8c8c;
          top: 50%;
          transform: translateY(-50%);
        }
        &:before {
          left: -18px;
        }
        &:after {
          right: -18px;
        }
      }
    }
  }
  .fabric-toolbar-container {
    z-index: 99;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    user-select: none;
    .divider {
      width: 1px;
      height: 18px;
      background-color: #0c2236;
      margin: 0 8px;
      align-self: center;
    }
    .toolContainer {
      width: 556px;
      height: 48px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      padding: 0 8px;
      .itemView {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        margin: 4px 8px;
        cursor: pointer;
        &.active {
          background: rgba(22, 119, 255, 0.3);
          color: #1677ff;
        }
      }

      .graphic-button {
        display: flex;
        align-items: center;
        .space-item {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 56px;
          height: 26px;
          border-radius: 4px 4px 4px 4px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          line-height: 13px;
          letter-spacing: 1px;
        }
        :nth-child(1) {
          background: #ffffff;
          color: #8c8c8c;
          margin-right: 8px;
        }
        :nth-child(2) {
          background: #1677ff;
          color: #ffffff;
        }
      }
    }
    .stylePickerContainer {
      position: absolute;
      left: 0;
      top: 56px;
      width: 272px;
      .arrow {
        width: 0;
        height: 0;
        margin-left: 28px;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid rgba(255, 255, 255, 0.8);
      }
      .stylePickerWrapper {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 4px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        /deep/.ant-slider {
          width: 64px;
        }
        .text {
          min-width: 20px;
          color: #666;
          font-size: 12px;
          text-align: center;
        }
        .color-list {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .colorItem {
            cursor: pointer;
            border: 0.5px solid rgb(209, 209, 209);
            width: 17px;
            height: 17px;
            opacity: 1;
            border-radius: 2px;
            &.active {
              border: 2px solid rgb(255, 255, 255);
              box-shadow: 0 0 3px #0000005c;
            }
          }
        }
      }
    }
  }
  .panoramicDisplayCanvasContainer {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .BlackHole-container {
    width: 100%;
    height: 100%;
  }
  .progress-play-bar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    height: 64px;
    width: 98%;
  }
  .graphic-list-container {
    position: fixed;
    // left: 500px;
    // top: 500px;
    width: 320px;
    background: #ffffff;
    box-shadow: 0 4px 16px #0000001a;
    opacity: 0.9;
    padding: 16px;
    border-radius: 4px;
    .pop-close {
      cursor: pointer;
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 8px;
      color: #666;
      font-size: 12px;
    }
    .pop-arrow {
      position: absolute;
      left: 50%;
      bottom: -19px;
      transform: translate(-50%);
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 30px solid #ffffff;
      z-index: -1;
    }
  }
  /deep/.ant-spin-spinning {
    max-height: 100% !important;
  }

  //图模联动-显示隐藏
  .hide-icon,
  .show-icon {
    pointer-events: all;
    z-index: 999;
    position: absolute;
    left: 320px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    /deep/.anticon-double-left,
    .anticon-double-right {
      font-size: 36px;
      color: #8c8c8c;
    }
  }
  .show-icon {
    left: 20px;
  }
}
</style>
